<template>
  <div class="dia">
    <el-dialog
      v-model="dialogVisible"
      title="快速查询"
      width="600px"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div class="con">
        <div class="head">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="图层类型">
              <el-select
                v-model="formInline.keyword"
                placeholder="请选择"
                clearable
                style="width: 100px"
                @change="changeSelect"
              >
                <el-option label="燃气管线" value="line" />
                <el-option label="燃气管点" value="point" />
              </el-select>
            </el-form-item>
            <el-form-item label="查询范围">
              <el-radio-group v-model="radio1">
                <el-radio value="1" size="large" border>全图</el-radio>
                <el-radio value="2" size="large" border>指定范围</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button v-if="radio1 === '2'" @click="clickBtn('绘制')"
                >绘制</el-button
              >
              <el-button v-if="radio1 === '2'" @click="clickBtn('清除绘制')"
                >清除绘制</el-button
              >
              <el-button type="primary" @click="clickSq">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="body">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="250"
            v-if="formInline.keyword === 'line'"
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="sheng" label="省" width="100" />
            <el-table-column prop="shi" label="市" width="100" />
            <el-table-column prop="xian" label="县" width="100" />
            <el-table-column prop="startPoint" label="起点号" width="100" />
            <el-table-column prop="endPoint" label="终点号" width="100" />
            <el-table-column prop="gch" label="工程号" width="100" />
            <el-table-column prop="type" label="管线类型" width="100" />
            <el-table-column prop="gxType" label="管线子类型" width="100" />
            <el-table-column prop="gxCz" label="管线材料" width="100" />
            <el-table-column prop="startMs" label="起点埋深(米)" width="120" />
            <el-table-column prop="endMs" label="终点埋深(米)" width="120" />
            <el-table-column prop="msType" label="埋设方式" width="100" />
            <el-table-column prop="gxYl" label="管线压力" width="100" />
            <el-table-column prop="gj" label="管径/断面尺寸" width="120" />
            <el-table-column prop="addTime" label="建设时间" width="100" />
            <el-table-column fixed="right" label="操作" min-width="80">
              <template #default="scope">
                <el-button size="small" @click="handleClick(scope.row.geom.coordinates, '管线')">定位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="250"
            v-if="formInline.keyword === 'point'"
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="sheng" label="省" width="100" />
            <el-table-column prop="shi" label="市" width="100" />
            <el-table-column prop="xian" label="县" width="100" />
            <el-table-column prop="tsdh" label="图上点号" width="100" />
            <el-table-column prop="gch" label="工程号" width="100" />
            <el-table-column prop="type" label="管线类型" width="100" />
            <!-- <el-table-column prop="type" label="管线子类型" width="100" /> -->
            <el-table-column prop="ms" label="埋深" width="100" />
            <el-table-column prop="cc" label="管径/断面尺寸" width="120" />
            <el-table-column prop="cz" label="材质" width="100" />
            <el-table-column prop="tz" label="特征" width="100" />
            <el-table-column prop="addTime" label="建设时间" width="100" />
            <el-table-column prop="fsw" label="附属物" width="100" />
            <el-table-column prop="pointYl" label="管点压力" width="100" />
            <el-table-column prop="x" label="x坐标" width="100" />
            <el-table-column prop="y" label="y坐标" width="100" />
            <el-table-column prop="dmGc" label="地面高程(米)" width="120" />
            <el-table-column prop="jbs" label="井深(米)" width="100" />
            <el-table-column fixed="right" label="操作" min-width="80">
              <template #default="scope">
                <el-button size="small" @click="handleClick(scope.row.geom.coordinates, scope.row.tz)">定位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            size="small"
            background
            layout="prev, pager, next, total"
            :total="searchForm.total"
            class="mt-4"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ManageService from '@/service/manage.service'
const props = defineProps({
  QuickQueryVisible: {
    type: Boolean,
    default: ''
  },
  QuickQueryArr: {
    type: Array,
    default: []
  }
})
const emits = defineEmits(['update:QuickQueryVisible', 'listenQuickQuery'])
const radio1 = ref('1')
const tableData = ref([])
const dialogVisible = computed({
  get: () => props.QuickQueryVisible,
  set: (val) => {
    emits('listenQuickQuery', '关闭弹窗')
  }
})
const formInline = ref({
  keyword: 'line'
})
const searchForm = ref({
  totle: 0,
  current: 1,
  size: 10
})
const handleClick = (coordinates, type) => {
  emits('listenQuickQuery', '定位', coordinates, type)
}
const clickBtn = (type) => {
  // if (type === '清除绘制') {
  //   props.QuickQueryArr = []
  // }
  emits('listenQuickQuery', type)
}
const clickSq = () => {
  getPage()
}
const changeSelect = () => {
  tableData.value = []
}
const getPage = () => {
  let coordinates = []
  if (radio1.value === '2' && props.QuickQueryArr.length === 0) {
    ElMessage.error('请先在地图上框选区域')
    return
  }
  if (radio1.value === '2') {
    coordinates = props.QuickQueryArr
  }
  ManageService.quick_search({
    current: searchForm.value.current,
    size: searchForm.value.size,
    keyword: formInline.value.keyword,
    geom:
      coordinates.length === 0
        ? null
        : {
            type: 'Polygon',
            crs: { type: 'name', properties: { name: 'EPSG:4490' } },
            coordinates: coordinates
          }
  }).then((res) => {
    if (res.data.records) {
      searchForm.value.total = res.data.total
      tableData.value = res.data.records
    }
  })
}
const handleCurrentChange = (val) => {
  searchForm.value.current = val
  getPage()
}
</script>
<style lang="scss" scoped>
.dia {
  color: #000;
  :deep(.el-form-item__label) {
    color: #fff;
  }
  & > :deep(div) {
    pointer-events: none;
  }

  :deep(.el-dialog) {
    pointer-events: auto !important;
    background: rgba(1, 25, 53, 0.8);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(219, 238, 175, 0.2);
    color: #fff;
    position: absolute;
    border-radius: 4px;
    left: 10px;
    bottom: 0;

    .el-dialog__headerbtn .el-dialog__close,
    .el-dialog__title {
      color: #fff;
    }
  }

  .con {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    .body {
      width: 100%;
      :deep(.el-table) {
        .el-table__cell {
          padding: 4px 0;
          background-color: #052145 !important;
        }
        th.el-table__cell {
          background-color: #052145 !important;
        }
      }
    }
    .mt-4 {
      margin-top: 10px;
      text-align: right;
      float: right;
      :deep(.el-pagination__total) {
        color: #fff;
      }
    }
  }
}
</style>
